<template>
  <div>
    <el-drawer
      title="系统布局配置"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <div class="drawer-container">
    <div>
      <!-- <h3 class="drawer-title">系统布局配置</h3> -->

      <div class="drawer-item">
        <span>开启 Tags-View</span>
        <el-switch
          v-model="tagsView"
          @change="changTags"
          class="drawer-switch"
        />
      </div>

      <div class="drawer-item ">
        <span>侧边栏 Logo</span>
        <el-switch v-model="sidebarLogo" class="drawer-switch" />
      </div>
      <div class="drawer-item drawer-item-fontsize">
        <span>
          修改字体
        </span>
        <el-select
          style="width:50%"
          v-model="value"
          size="mini"
          placeholder="请选择字体"
          @change="changeFont"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <div class="drawer-item" :style="{ height: drawerHeight }">
        <el-card shadow="never" class="myThemeCard">
          <el-divider content-position="center">主题</el-divider>
          <el-row>
            <el-button
              @click="themeStyle('default')"
              class="bStyle"
              size="mini"
              style="margin-top:10px;"
              icon="el-icon-check"
              >默认主题</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('dark')" class="bStyle" size="mini"
              >深色主题</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('TOrange')" class="bStyle" size="mini"
              >科技橙</el-button
            >
          </el-row>
          <el-row>
            <el-button
              @click="themeStyle('BusinessBlue')"
              class="bStyle"
              size="mini"
              >商务蓝</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('temp')" class="bStyle" size="mini"
              >temp gary</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('vsCode')" class="bStyle" size="mini"
              >Tomorrow Night Blue (vsCode)</el-button
            >
          </el-row>
          <el-row>
            <el-button
              @click="themeStyle('vsCodeDark')"
              class="bStyle"
              size="mini"
              >One Dark pro (vsCode)</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('dataAge')" class="bStyle" size="mini"
              >数据时代</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('purple')" class="bStyle" size="mini"
              >purple 渐变</el-button
            >
          </el-row>
          <el-row>
            <el-button @click="themeStyle('traffic')" class="bStyle" size="mini"
              >远峰蓝</el-button
            >
          </el-row>
          <el-row>
            <el-button
              @click="themeStyle('darkMode')"
              class="bStyle"
              size="mini"
              >Global Dark Mode</el-button
            >
          </el-row>
        </el-card>
      </div>

      <!-- <div class="titles">
        <el-alert title="您是dsg v8 用户，可享受全部配置权限" type="success" :closable="false"></el-alert>
      </div> -->
    </div>
  </div>
    </el-drawer>
  </div>
</template>

<script>

export default {
  name: 'RightPanel',
  props: {
  },
  data() {
    return {
      show: false,
      buttonTop:250,
      clickNotClose:false,
      drawer:false,
      direction: 'rtl',
      myTheme: {},
      page_url: "",
      drawerHeight: "",
      bg: "",
      dataHeader: "",
      datAsideBg: "",
      useDataHeader: "",
      useDataAside: "",
      orangeBg: "",
      blueBg: "",
      tagsView: "",
      options: [
        {
          value: "12px",
          label: "12px"
        },
        {
          value: "13px",
          label: "13px"
        },
        {
          value: "14px",
          label: "14px"
        }
      ],
      value: "",
      sidebarLogo:''
    }
  },
  computed: {
    theme() {
      return "#004894"
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    init(){
        this.drawer=true
        this.drawerHeight = `${document.body.clientHeight - 230}px`;
    },
    handleClose() {
        this.drawer=false
    },
    changTags(){},
    changeFont(){},
    themeStyle(themeList) {
      localStorage.setItem("colorPicker", themeList);
      // this.myTheme =myData[themeList];
      // console.log('this.myTheme: ', this.myTheme);
      switch (themeList) {
        case "default":
          const defaultObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "#eaedf1",
            themeAsideBg: "#eaedf1",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "rgb(92, 92, 92)",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "defaultLogo",
            asideTitle: "rgb(55, 61, 65)",
            asideAcitve: "#004894",
            tagsColor: "#004894",
            btnHoverTextColor: "#004894",
            btnHoverColor: "#004894",
            asideAcitveBg: "#d0dbec",
            menuHover: "#d0dbec",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "#d0dbec",
            tableCellHover: "#d0dbec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(230,236,248)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(8,75,146)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = defaultObj;
          break;
        case "dark":
          const darkObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: this.orangeBg,
            themeAsideBg: "#eaedf1",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "rgb(55, 61, 65)",
            asideAcitve: "#004894",
            tagsColor: "#004894",
            btnHoverColor: "#004894",
            asideAcitveBg: "#d0dbec",
            menuHover: "#d0dbec",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "#d0dbec",
            tableCellHover: "#d0dbec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(230,236,248)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(8,75,146)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = darkObj;
          break;
        case "TOrange":
          const TOrangeObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: this.blueBg,
            themeAsideBg: "#eaedf1",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "rgb(55, 61, 65)",
            asideAcitve: "#fa9426",
            tagsColor: "#fa9426",
            btnHoverColor: "#fa9426",
            asideAcitveBg: "#f1e2d1",
            menuHover: "#f1e2d1",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "#fdf6ec",
            tableCellHover: "#fdf6ec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(251,242,227)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(248,147,55)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = TOrangeObj;
          break;
        case "BusinessBlue":
          const BusinessBlueObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "#2c303c",
            themeAsideBg: "#eaedf1",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "rgb(55, 61, 65)",
            asideAcitve: "#0c9cfc",
            tagsColor: "#0c9cfc",
            btnHoverTextColor: "#0c9cfc",
            btnHoverColor: "#0c9cfc",
            asideAcitveBg: "#e6f5ff",
            menuHover: "#e6f5ff",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "#e6f5ff",
            tableCellHover: "#d0dbec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(228,242,253)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(33,158,250)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = BusinessBlueObj;
          break;
        case "temp":
          const tempObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "#ffffff",
            themeAsideBg: "rgb(19,24,27)",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "rgb(122,144,160)",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "defaultLogo",
            asideTitle: "#8ca1af",
            asideAcitve: "#36b0c8",
            tagsColor: "#36b0c8",
            btnHoverTextColor: "#36b0c8",
            btnHoverColor: "#36b0c8",
            asideAcitveBg: "rgb(27,33,38)",
            menuHover: "#2c3942",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "#ecf5ff",
            tableCellHover: "#d0dbec",
            subIcon: "#ffffff",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(224,243,247)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(62,176,200)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = tempObj;
          break;
        case "vsCode":
          const vsCodeObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "#002253",
            themeAsideBg: "#002253",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ff929a",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "#ff929a",
            asideAcitve: "#ffb870",
            tagsColor: "#ffb870",
            btnHoverTextColor: "#ffb870",
            btnHoverColor: "#ffb870",
            asideAcitveBg: "hsla(0,0%,100%,.05)",
            menuHover: "hsla(0,0%,100%,.05)",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "hsla(0,0%,100%,.05)",
            tableCellHover: "#fdf6ec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(255,237,237)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(255,146,155)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = vsCodeObj;
          break;
        case "vsCodeDark":
          const vsCodeDarkObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "rgb(24,28,44)",
            themeAsideBg: "rgb(24,28,44)",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "#ffffff",
            asideAcitve: "rgb(198,128,72)",
            tagsColor: "rgb(198,128,72)",
            btnHoverTextColor: "rgb(198,128,72)",
            btnHoverColor: "rgb(198,128,72)",
            asideAcitveBg: "hsla(0,0%,100%,.05)",
            menuHover: "hsla(0,0%,100%,.05)",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "hsla(0,0%,100%,.05)",
            tableCellHover: "#fdf6ec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(252,238,227)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(198,128,77)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = vsCodeDarkObj;
          break;
        case "purple":
          const appleObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "linear-gradient(-90deg, #29bdd9 0%, #276ace 100%)",
            themeAsideBg: "#276ace",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "#cccccc",
            asideAcitve: "rgb(105,200,245)",
            tagsColor: "rgb(105,200,245)",
            btnHoverTextColor: "rgb(105,200,245)",
            btnHoverColor: "rgb(105,200,245)",
            asideAcitveBg: "hsla(0,0%,100%,.05)",
            menuHover: "hsla(0,0%,100%,.05)",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "hsla(0,0%,100%,.05)",
            tableCellHover: "#d0dbec",
            subIcon: "#ffffff",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(225,242,250)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "#2681ff" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = appleObj;
          break;
        case "dataAge":
          const dataAgeObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: this.useDataHeader,
            themeAsideBg: this.useDataAside,
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "#ffffff",
            asideAcitve: "#ffffff",
            tagsColor: "#8aa7cf",
            btnHoverTextColor: "#1138a6",
            btnHoverColor: "#1138a6",
            asideAcitveBg: "#1138a6",
            menuHover: "#1138a6",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "hsla(0,0%,100%,.05)",
            tableCellHover: "#d0dbec",
            subIcon: "#ffffff",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(227,234,252)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(21,60,165)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = dataAgeObj;
          break;
        case "traffic":
          const trafficObj = {
            boxs1Hover: "#f8f2d7",
            switchCircBg: "#fff",
            switchChecCircBg: "#fff",
            switchBg: "#dcdfe6",
            switchCheckBg: "#004894",
            transferTitleColor: "#333",
            treeActiveColor: "#ebf0f6",
            cardHeaderShadow: "#b0d0ef",
            timeSelectDivBg: "#f2f6fc",
            timePlugBorder: "#e4e4e4",
            timePlugColor: "#c0c4cc",
            cardShadow: "#ebeef5",
            tabText: "#909399",
            tabActive: "#ffffff",
            tabHeader: "#f5f7fa",
            cardHeaderBorder: "#EBEEF5",
            cardLine: "#DCDFE6",
            cardBg: "#ffffff",
            cardIcon: "#ffffff",
            cardSearchBg: "#ffffff",
            tabsLine: "#E4E7ED",
            BtnDisabledBorder: "#ebeef5",
            BtnDisabledColor: "#c0c4cc",
            tagOpacity: "1",
            stepTextColor: "#999999",
            cardHeaderBg: "#fff",
            cardHeaderText: "#666666",
            hostLabel: "#333333",
            headerBg: "#014a94",
            themeAsideBg: "#eaedf1",
            themeDividerBg: "#ffffff",
            themeTwoText: "#303133",
            themeSelectText: "#606266",
            headerTitle: "#ffffff",
            cardHeaderTitle: "rgb(92, 92, 92)",
            logo: "darkLogo",
            asideTitle: "rgb(55, 61, 65)",
            asideAcitve: "#33a9ff",
            tagsColor: "#33a9ff",
            btnHoverTextColor: "#33a9ff",
            btnHoverColor: "#33a9ff",
            asideAcitveBg: "#d0dbec",
            menuHover: "#d0dbec",
            btnColor: "rgb(55, 61, 65)",
            btnHover: "#ecf5ff",
            tableCellHover: "#d0dbec",
            subIcon: "#909399",
            menuWhiteBg: "rgba(255,255,255,1)",
            fontOneColor: "#333333",
            tagLine: "#eceaea",
            main: "rgb(225,234,246)",
            cardTableBg: "rgb(255,255,255)",
            buttonColor: "#ffffff",
            buttonBg: "#ffffff",
            pageBg: "#f4f4f5",
            cardHeader: "#f1f2f4",
            tbCellBg: "#FAFAFA",
            tbBorder: "#d6d9df",
            buttonBorderColor: "#DCDFE6",
            tbBg: "#ffffff",
            tbLine: "#ebeef5",
            tbColor: "#333333",
            tbLineHover: "#e2eaf6",
            loading: "rgba(255,255,255,.9)",
            dialogBg: "#fff",
            input: "transparent",
            formColor: "#606266",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(228,242,253)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(60,171,252)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = trafficObj;
          break;
        case "darkMode":
          const darkModeObj = {
            boxs1Hover: "#343c53",
            switchCircBg: "#7382b2",
            switchChecCircBg: "#ea7a00",
            switchBg: "#333d53",
            switchCheckBg: "#413d47",
            transferTitleColor: "#c8cdde",
            treeActiveColor: "#343c53",
            cardHeaderShadow: "#59748e",
            timeSelectDivBg: "#222833",
            timePlugBorder: "#c8cdde",
            timePlugColor: "#979aa0",
            cardShadow: "#c8cdde",
            tabText: "#c8cdde",
            tabActive: "#343c53",
            tabHeader: "#343c53",
            cardHeaderBorder: "#424b67",
            cardLine: "#424b67",
            cardBg: "#222833",
            cardIcon: "#7283b2",
            cardSearchBg: "#333d53",
            tabsLine: "#c8cdde",
            BtnDisabledBorder: "#c8cdde",
            BtnDisabledColor: "#c8cdde",
            tagOpacity: "0.8",
            stepTextColor: "#c8cdde",
            cardHeaderBg: "#343c53",
            cardHeaderText: "#c8cdde",
            hostLabel: "#c8cdde",
            headerBg: "#282d3c",
            themeAsideBg: "#212734",
            themeDividerBg: "#212734",
            themeTwoText: "#c8cdde",
            themeSelectText: "#c8cdde",
            headerTitle: "#c8cdde",
            cardHeaderTitle: "#c7cdde",
            logo: "darkLogo",
            asideTitle: "#c8ceed",
            asideAcitve: "#ea7a00",
            tagsColor: "#ea7a00",
            btnHoverTextColor: "#ffffff",
            btnHoverColor: "#ffffff",
            asideAcitveBg: "#343c53",
            menuHover: "#343c53",
            btnColor: "#c8ceed",
            btnHover: "#ea7a00",
            tableCellHover: "#ea7a00",
            subIcon: "#63739a",
            menuWhiteBg: "#343c53",
            fontOneColor: "#c8cdde",
            tagLine: "#535c7e",
            main: "#282d3c",
            cardTableBg: "#343c53",
            buttonColor: "#c8ceed",
            buttonBg: "transparent",
            pageBg: "transparent",
            cardHeader: "transparent",
            tbCellBg: "#343c53",
            tbBorder: "#7382b2",
            buttonBorderColor: "#7382b2",
            tbBg: "#32374d",
            tbLine: "#32374d",
            tbColor: "#c8ceed",
            tbLineHover: "#403f4d",
            loading: "rgba(0, 0, 0, 0.6)",
            dialogBg: "#282d3c",
            input: "transparent",
            formColor: "#ea7a00",
            datavMenu: "rgb(247,247,247)", //superDatav颜色(大屏引擎页面)
            tabsNav: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavColor: "#a1a9b3", //superDatav颜色(大屏引擎页面)

            datavFormColor: "#333", //superDatav颜色(大屏引擎页面)
            datavScreen: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavDialog: "rgb(255,255,255)", //superDatav颜色(大屏引擎页面)
            datavShow: "#000000", //superDatav颜色(大屏引擎页面)
            datavLeft: "rgb(228,242,253)", //superDatav颜色(大屏引擎页面)
            datavActiveColor: "rgb(60,171,252)" //superDatav颜色(大屏引擎页面)
          };
          this.myTheme = darkModeObj;
          break;
      }
      document.documentElement.style.setProperty(
        `--themeBg`,
        this.myTheme.headerBg
      );
      document.documentElement.style.setProperty(
        `--themeTitle`,
        this.myTheme.headerTitle
      );
      document.documentElement.style.setProperty(
        `--asideActive`,
        this.myTheme.asideAcitve
      );
      document.documentElement.style.setProperty(
        `--tableCellHover`,
        this.myTheme.tableCellHover
      );
      for (let i in this.myTheme) {
        document.documentElement.style.setProperty(`--${i}`, this.myTheme[i]);
      }
      store.commit("SET_THEME", this.myTheme);
      let color = document
        .getElementsByTagName("html")[0]
        .style.cssText.split(";")[1]
        .split(":")[1];
      store.commit("GET_COLOR", color);
    }
  }
}
</script>

<style>
.myThemeCard {
  border: 0.5px solid var(--tbBorder) !important;
}
.drawer-container {
  padding: 24px;
  font-size: var(--fontSize);
  line-height: 1.5;
  word-wrap: break-word;
}
.drawer-container .drawer-title {
    color: var(--themeBg);
    margin-bottom: 12px;
    /* color: rgba(0, 0, 0, 0.85); */
    color: var(--fontOneColor);
    font-size: var(--fontSize);
    line-height: 22px;
}
.drawer-container.drawer-item {
    color: var(--fontOneColor);
    font-size: var(--fontSize);
    padding: 12px 0;
    overflow: auto;
}
.drawer-container.drawer-switch {
    float: right;
}
.titles {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}
.bStyle {
  margin-bottom: 10px;
  width: 100%;
}
.drawer-fontsize {
  font-size: var(--fontSize);
}
.drawer-item-fontsize {
  display: flex;
  justify-content: space-between;
}
.drawer-item-fontsize span{
    line-height: 28px;
}
</style>
